<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link href="/static/element-ui/theme-chalk/index.css" rel="stylesheet">
    <link href="/static/css/main.css" rel="stylesheet">

    <link rel="icon" type="image/x-icon" href="/static/img/favicon.png">
    <link rel="shortcut icon" type="image/x-icon" href="/static/img/favicon.png">
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 400px;
            margin: 0;
        }
        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }
        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
</style>
</head>
<body>
    <div id="app">
        <el-container>
            {{<template "header.html" .>}}
            <el-main>
                <el-row>
                    <el-col :span="20" :offset="2">                        
                        <el-carousel indicator-position="outside" height="400px">
                            <el-carousel-item v-for="item in 4" :key="item">
                                <h3 style="text-align:center"><a href="/projects"><el-button type="primary">查看项目列表</el-button></a></h3>
                            </el-carousel-item>
                        </el-carousel>
                    </el-col>
                </el-row>
            </el-main>
            {{<template "footer.html" .>}}
        </el-container>
    </div>
</body>
    <!-- 先引入 Vue -->
    <script src="/static/vue/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="/static/element-ui/index.js"></script>
    <!-- 引入axios异步通信库 -->
    <script src="/static/axios/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
                logout: function() {
                    axios.post('/logout')
                    .then(function (response) {
                        var rsp = response.data
                        if(rsp.code === 0){
                            vm.$notify({
                                message: rsp.message,
                                type: 'success'
                            });
                            setTimeout("window.location.href='/'", 500);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                }
            }
        })
    </script>
</html>